import React from 'react';
// import { deflateRawSync } from 'zlib';
// import { comments } from './comment/mode';
// import $ from 'jquery';
import $ from 'jquery';

// console.log($)

class Abc extends React.Component{
    constructor(){
        super()

    }

    render(){
        return (
            <div>
             <p>11111</p>

            </div>
        )
        // return React.createElement("div",{className:'shopping-list'}),react.createElement("h1","hhhhhhhhhh")

    }
}
class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {this.props.value}
        </button>
      );
    }
  }

class Board extends React.Component {
    renderSquare(i) {
      return <Square value={i} />;
    }

    render(){
        return(
            <div>
          {this.renderSquare(0)}
        </div>
        )
    }

}


class Comment extends React.Component{
   render(){
      return (
        <div className="comment">
        <div className="content">
        <span className="author">{this.props.author}</span>
        <div className="metadata">
            <span className="date">  {this.props.date}</span>
        </div>
        <div className="text">
            <span>  {this.props.children}</span>
        </div>
        </div>
        </div>
      )
   }
}







class CommentList extends React.Component{
    render(){
        let commentNodes= this.props.data.map(comment =>{
            return (
                <div>
                 <Comment author={comment.author} date={comment.data} >{comment.text}</Comment>
                </div>
         )      
        })

         return (
<div > {commentNodes}</div>


         )
    }
    }
    

    class CommentForm extends React.Component{

        handleSubmit(event){
          console.log('提交');
          event.preventDefault();
        
          let author=this.refs.author.value,
              text=this.refs.text.value;
              console.log("wxq"+author,"wxq"+text)
              
              //回调到他的上面那个类里面的方法执行打印操作   
              this.props.onCommentSubmit({author,text,data:"刚刚"})
        }


        render(){
            return (
                <form  className="ui reply form"  onSubmit={this.handleSubmit.bind(this)} > 
                <div className="field">
                    <input type="text" placeholder="姓名"  ref ="author"></input>
                </div>
                <div className="field">
                    <textarea type="text" placeholder="评论" ref ="text" ></textarea>
                </div>
               <button type="submit"  className="ui blue button">
                    点击添加

               </button>


                </form> 

            )
     
        }
        }



        // var comments = [
        //     {"author":"wxq","data":"5 分钟","text":"ssss"},
        //     {"author":"小雪","data":"15分钟","text":"dddd"},
        //      {"author":"小黑","data":"15分钟","text":"gggg"}
        // ]



        class CommentBox extends React.Component{
            constructor(props){
             super(props);
            this.state={
                data:[]
            }
        
             setInterval(()=>this.getComments(),5000);
           
            }

            handleCommentSubmit(comment){
               console.log(comment)
            //    react向state中的数组添加新内容的方法concat(新的内容)+加载更多
              let comments=this.state.data,
                  newComment=comments.concat(comment);  
                this.setState({data:newComment});

            }

            getComments(){
                console.log("1111")
                $.ajax({
                    url:this.props.url,
                    dataType:"json",
                    cache :false,
                    success: comments =>{
                        console.log(comments)
                        this.setState({data:comments})
                    },error :(xhr,status,error)=>{
                        console.log(error)
                    }
                    })
            }



            render(){
                return (
                       <div>
                        <div className="ui comments">
                        <h1>评论</h1>
                        <div className="ui diveider"></div>
                        <CommentList  data={this.state.data}/>
                        <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>

                        </div>
            
                       </div>
                )
                    
                
            }
            
            }


export {
    Board,Abc,CommentBox,CommentList
} 